<template>
	<view class="app app-bg">
		<!-- 页面内容开始 -->
		<u-gap height="10" bg-color="#f3f3f3"></u-gap>
		<view class="vk-list-view">
			<!--无内容时 -->
			<view v-if="data.list.length == 0" style="padding: 40% 0 80% 0;">
				<u-empty text="加载中" mode="list" v-if="loading"></u-empty>
				<u-empty text="暂无内容" mode="list" v-else></u-empty>
			</view>
			<!--有内容时开始-->
			<view v-if="data.list.length > 0" class="list-view my-list-view">
				<view v-for="(item, index) in data.list" :key="item._id">
					<!-- 自定义item的内容开始 -->
					<view
						@click="itemBtn(item)"
						style="display: block;background-color: #FFFFFF;margin: 20rpx;padding: 30rpx;" class="content"
					>
						<view style="display: flex;">
							<view style="display: flex;align-items: center;margin-right: 20rpx;">
								<image :src="item.logo" mode="aspectFill" style="width: 100rpx;height: 100rpx;border-radius: 50%;"></image>
							</view>
							<view style="flex: 1;">
								<view class="text-one" style="font-weight: bold;">{{ item.name || "店铺名称" }}</view>
								<view class="mt5">地址：{{ item.position.formatted_address }}</view>
								<view class="mt5 text-one" v-if="item.service_mobile">电话：{{ item.service_mobile }} <text style="margin-left: 20rpx;color: #4e8fe9;" @click="openTel(item.service_mobile)">拨打电话</text></view>
								<view class="mt5 text-one">距离：{{ item.distance >= 0 ? item.distance.toFixed(2) + 'km' :'未知' }} <text style="margin-left: 20rpx;color: #4e8fe9;" @click="openMap(item)">导航到店</text></view>
								<view class="mt5 text-one" v-if="item.image_env && item.image_env.length > 0">环境：<text style="color: #4e8fe9;" @click="showImage(item.image_env)">查看</text></view>
							</view>
						</view>
					</view>

					<!-- 自定义item的内容结束 -->
				</view>
				<!-- 加载更多 -->
				<u-loadmore :status="data.loadmore" bg-color="#f3f3f3" margin-bottom="30" @loadmore="nextPage" />
			</view>
			<!--有内容时结束-->
		</view>
		<!-- 页面内容结束 -->
		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<vk-data-loading v-model="loading"></vk-data-loading>
	</view>
</template>

<script>
var vk = uni.vk;			// vk依赖
export default {
	data() {
		// 页面数据变量
		return {
			action: "client/pub.getShopList", // 获取list数据的云函数请求路径
			// init请求返回的数据
			data: {
				list: [], // 列表数据
				pageKey: true, // 是否还能加载下一页
				loadmore: "loading"
			},
			// 表单请求数据
			form1: {
				searchvalue: "",
				location:{},
				pageIndex: 1, //当前页码
				pageSize: 100 //每页显示数量
			},
			scrollTop: 0,
			loading:true,

		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		vk = uni.vk;
		this.options = options;
		this.init(options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 页面下拉刷新
	onPullDownRefresh() {
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	// 监听 - 页面触底部
	onReachBottom(options) {
		this.nextPage();
	},
	// 监听 - 窗口尺寸变化(仅限:App、微信小程序)
	onResize() {},
	// 监听 - 点击右上角转发时
	onShareAppMessage(options) {},
	// 函数
	methods: {
		// 页面数据初始化函数
		async init(options) {
			let that = this;
			that.form1._id = options._id;
			that.form1.mchId = options.mchId;
			let location = await vk.myfn.user.getLocation();
			if (location) that.form1.location = location;
			that.getList();
		},
		pageTo(path) {
			vk.navigateTo(path);
		},
		// 查询list数据
		getList(obj = {}) {
			let that = this;
			vk.pubfn.getListData({
				that: that,
				loading:true,
				url: that.action,
				success: obj.success
			});
		},
		// 加载下一页数据
		nextPage() {
			let that = this;
			if (that.data.loadmore == "loadmore") {
				that.data.loadmore = "loading";
				that.form1.pageIndex++;
				that.getList();
			}
		},
		// 搜索
		onSearch(e) {
			let that = this;
			console.log("搜索", that.form1.searchvalue);
			that.form1.pageIndex = 1;
			that.data.pageKey = true;
			that.getList();
		},
		// 列的点击事件
		itemBtn(item) {

		},
		openMap(item){
			if (vk.pubfn.isNull(item.location)){
				vk.toast("未设置地图");
				return false;
			}
			let address = vk.pubfn.getData(item, "position.formatted_address");
			uni.openLocation({
				latitude: item.location.coordinates[1],
				longitude: item.location.coordinates[0],
				name: item.name,
				address: address,
				success: () => {

				}
			});
		},
		openTel(mobile){
			uni.makePhoneCall({
				phoneNumber: mobile
			});
		},
		showImage(images){
			uni.previewImage({
				urls: images
			})
		}
	},
	// 计算属性
	computed: {}
};
</script>
<style lang="scss" scoped>
/* list 开始 */
.vk-list-view {
	background-color: #f3f3f3;
}
.vk-list-view .list-view {
	padding: 0rpx 0rpx 20rpx 0rpx;
}
.vk-list-view .list-search {
	background-color: #ffffff;
	padding: 20rpx 30rpx;
}
.vk-list-view .list-head-desc-text {
	font-size: 28rpx;
	color: #999;
	padding: 20rpx 30rpx 0rpx 30rpx;
	padding-bottom: 0;
	line-height: 52rpx;
	width: 100%;
}
.vk-list-view .list-head-text-num {
	font-weight: bold;
	color: black;
	font-size: 26rpx;
	margin-left: 10rpx;
	margin-right: 10rpx;
}
/* list 结束 */
.content {
	flex: 1;
	font-size: 24rpx;
	position: relative;
	.name-view{
	}
	.name {
		font-size: 26rpx;
		font-weight: bold;
	}

	.mt5 {
		margin-top: 20rpx;
	}

	.recharge {
		margin-top: 10rpx;
	}

	.consumption {
		margin-top: 10rpx;
	}

	.text-one {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.setting {
		position: absolute;
		right: 0rpx;
		top: 0rpx;
	}
}
</style>
